<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5x5 扑克牌消除游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(5, 100px);
            gap: 10px;
            margin: 20px;
        }

        .card {
            width: 100px;
            height: 140px;
            background-color: #d3d3d3;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: black;
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #4CAF50 0%, #81c784 100%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .card:hover::before {
            opacity: 0.5;
        }

        .timer {
            font-size: 24px;
            margin-top: 20px;
        }

        .game-over {
            margin-top: 20px;
            font-size: 24px;
            color: #4CAF50;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>5x5 扑克牌消除游戏</h1>
    <div class="timer" id="timer">时间: 00:00</div>
    <div class="game-board" id="gameBoard"></div>
    <div id="gameStatus" class="game-over"></div>
</div>

<script>
    // 初始化游戏
    let gameBoard = [];
    let flippedCards = [];
    let moveCount = 0;
    let startTime;
    let interval;

    // 生成一组5x5的扑克牌
    function generateCards() {
        const suits = ["♠", "♥", "♣", "♦"];
        const values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
        const deck = [];
        for (let i = 0; i < 13; i++) {
            deck.push({ suit: suits[i % 4], value: values[Math.floor(i / 4)] });
            deck.push({ suit: suits[i % 4], value: values[Math.floor(i / 4)] });
        }

        // 打乱牌顺序
        for (let i = deck.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [deck[i], deck[j]] = [deck[j], deck[i]];
        }

        gameBoard = deck.slice(0, 25);
    }

    // 绘制游戏界面
    function renderGameBoard() {
        const gameBoardElement = document.getElementById("gameBoard");
        gameBoardElement.innerHTML = "";

        gameBoard.forEach((card, index) => {
            const cardElement = document.createElement("div");
            cardElement.className = "card";
            cardElement.dataset.index = index;
            cardElement.dataset.suit = card.suit;
            cardElement.dataset.value = card.value;
            cardElement.addEventListener("click", () => flipCard(index));
            gameBoardElement.appendChild(cardElement);
        });
    }

    // 翻转牌
    function flipCard(index) {
        if (flippedCards.length >= 2) return;
        const card = gameBoard[index];
        const cardElement = document.querySelector(`.card[data-index="${index}"]`);

        // 显示牌面
        cardElement.style.backgroundColor = "#fff";
        cardElement.innerHTML = `<span>${card.suit}${card.value}</span>`;

        flippedCards.push({ index, suit: card.suit, value: card.value });

        if (flippedCards.length === 2) {
            checkMatch();
        }
    }

    // 检查匹配
    function checkMatch() {
        const [first, second] = flippedCards;
        moveCount++;

        if (first.suit === second.suit && first.value === second.value) {
            // 匹配成功，消除卡片
            const card1 = document.querySelector(`.card[data-index="${first.index}"]`);
            const card2 = document.querySelector(`.card[data-index="${second.index}"]`);
            card1.style.backgroundColor = "#f5f5f5";
            card1.style.padding = "0";
            card1.style.border = "1px solid #fff";
            card2.style.backgroundColor = "#f5f5f5";
            card2.style.padding = "0";
            card2.style.border = "1px solid #fff";
            gameBoard[first.index] = null;
            gameBoard[second.index] = null;
        } else {
            // 匹配失败，翻转卡片
            setTimeout(() => {
                const card1 = document.querySelector(`.card[data-index="${first.index}"]`);
                const card2 = document.querySelector(`.card[data-index="${second.index}"]`);
                card1.style.backgroundColor = "#d3d3d3";
                card1.innerHTML = "";
                card2.style.backgroundColor = "#d3d3d3";
                card2.innerHTML = "";
            }, 1000);
        }

        flippedCards = [];
        checkGameOver();
    }

    // 检查游戏是否结束
    function checkGameOver() {
        if (gameBoard.every(card => card === null)) {
            clearInterval(interval);
            alert(`恭喜你，成功消除所有扑克牌！用时 ${document.getElementById("timer").textContent}`);
        }
    }

    // 启动计时器
    function startTimer() {
        startTime = Date.now();
        interval = setInterval(() => {
            const currentTime = Date.now() - startTime;
            const minutes = Math.floor(currentTime / 60000).toString().padStart(2, "0");
            const seconds = Math.floor((currentTime % 60000) / 1000).toString().padStart(2, "0");
            document.getElementById("timer").textContent = `时间: ${minutes}:${seconds}`;
        }, 1000);
    }

    // 开始游戏
    function startGame() {
        generateCards();
        renderGameBoard();
        startTimer();
    }

    window.onload = startGame;
</script>
</body>
</html>